<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .blue{
            display: none;
        }
        div{
            display: inline;
            background-color: #8bc34a;
            width: 400px;
            height: 50px;
        }
        span{
            display: block;
        }
        p{
            display: inline-block;
            width: 400px;
            height: 50px;
            background-color: bisque;
        }
    </style>
</head>
<body>

<!--
display:设置元素显示的方式
取值有：none：隐藏元素
        inline：将元素设置为行内元素
        block:将元素设置为块级元素
        inline-block:具有inline和block的特性，显示为行内元素，并且可以设置宽高
        flex:是flexbox的缩写，叫做弹性盒子，它可以替代上面三种值的效果
-->

<div>第一个div</div>
<div id="div2">第二个div</div>
<span id="span1">第一个span</span>
<span>第二个sapn</span>
<p class="red">你是风儿我是沙</p>
<p class="red">缠缠绵绵到天涯</p>
<p class="blue">你是风儿我是沙，缠缠绵绵到天涯</p>

</body>
</html>